<template>
  <div class="entry-container">
    <div class="entry-item">
      <p>Entry: {{ entry_id }}</p>
      <p>Subject: {{ interaction.subject }}</p>
      <p>Notes: {{ interaction.notes }}</p>
      <p>Reasons: {{ interaction.reasons }}</p>
      <p>Time: {{ time }}</p>

      <ClearHolds
        v-if="holds && holds.hasHolds"
        v-bind:permission="permissions.clear && !readonly"
        v-bind:state="holds.hasHolds"
      ></ClearHolds>

      <Reassign
        v-bind:assignTo="interaction.ownerName"
        v-bind:permission="permissions.reassign && !readonly"
      ></Reassign>

      <Resolve
        v-bind:permission="permissions.resolve && !readonly"
        v-bind:state="interaction.interactionState"
      ></Resolve>

      <hr v-if="interaction.unfinished && !readonly" />
      <FinishAppointment
        v-bind:permission="permissions.finish"
        v-bind:unfinished="interaction.unfinished && !readonly"
      ></FinishAppointment>
    </div>
    <div class="entry-item">
      <MessageForm
        v-bind:permission="permissions.addMessage && !readonly"
      ></MessageForm>
      <hr v-if="!readonly" />
      <Messages v-bind:messages="messages"></Messages>
    </div>
  </div>
</template>

<script>
import ClearHolds from "@/components/ClearHolds.vue";
import FinishAppointment from "@/components/FinishAppointment.vue";
import MessageForm from "@/components/MessageForm.vue";
import Messages from "@/components/Messages.vue";
import Reassign from "@/components/Reassign.vue";
import Resolve from "@/components/Resolve.vue";

export default {
  name: "Entry",
  components: {
    ClearHolds,
    FinishAppointment,
    MessageForm,
    Messages,
    Reassign,
    Resolve
  },
  props: ["entry", "holds", "readonly", "record_id"],
  computed: {
    entry_id: function() {
      return this.entry.id;
    },
    interaction: function() {
      return this.entry.interaction;
    },
    time: function() {
      return this.entry.interaction.sessionStartTime &&
        this.entry.interaction.sessionEndTime
        ? `${this.entry.interaction.sessionStartTime} to ${this.entry.interaction.sessionEndTime}`
        : `${this.entry.interaction.sessionStartTime}${this.entry.interaction.sessionEndTime}`;
    },
    messages: function() {
      return this.entry.messages;
    },
    permissions: function() {
      return this.entry.permissions;
    }
  }
};
</script>

<style scoped>
.entry-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.entry-item {
  min-width: 360px;
  width: 48%;
  margin-bottom: 2%;
}
.entry-item:last-of-type {
  min-width: 50%;
}
</style>
